<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <link rel="stylesheet" href="lib/datepicker/skin/WdatePicker.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 95%;
            height: 100%;
            padding: 10px;
            margin: 0 auto;
        }
        
        #addstudent {
            margin-left: 1144px;
        }
        
        #template {
            display: none;
        }
        
        #wrap {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            position: fixed;
            top: 0;
            display: none;
        }
        
        #pop {
            width: 600px;
            background: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px 50px;
            display: none;
        }
        
        .form-group {
            margin-bottom: 13px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>学生信息管理系统</h2>
        <button class="btn btn-success " id="addstudent">新增学生</button>
        <table class="table">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>籍贯</th>
                    <th>出生日期</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr id="template">
                    <td class="id"></td>
                    <td class="name"></td>
                    <td class="age"></td>
                    <td class="sex"></td>
                    <td class="city"></td>
                    <td class="joinDate"></td>
                    <td>
                        <button class="btn btn-primary edit">修改</button>
                        <button class="btn btn-danger delete">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="wrap"></div>
    <div id="pop">
        <div class="form-horizontal">
            <div class="form-group">
                <label for="-name" class="col-sm-2 control-label">学生姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" placeholder="学生姓名">
                </div>
            </div>

            <div class="form-group">
                <label for="age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="age" placeholder="年龄">
                </div>
            </div>

            <div class="form-group">
                <label for="age" class="col-sm-2 control-label">性别</label>
                <label class="radio-inline">
                    <input type="radio" name="sex" checked>男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="female">女
                </label>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">所在城市</label>
                <select name="" id="province"></select>
                <select name="" id="city"></select>
                <select name="" id="area"></select>
            </div>


            <div class="form-group">
                <label class="col-sm-2 control-label">出生日期</label>
                <div class="col-sm-10">
                    <input type="input" class="form-control" id="joinDate" placeholder="出生日期" onclick="WdatePicker()">
                </div>
            </div>

            <div class="form-group" style="float:right;margin-top:20px;">
                <button id="submit" class="btn btn-primary">确认添加</button>
                <button id="cancel" class="btn btn-default">取消</button>
            </div>
        </div>

    </div>
    </div>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/citys.js"></script>
    <script src="lib/datepicker/WdatePicker.js"></script>
    <script>
        //将数据库中的数据展现到前端
        let address = "http://10.35.170.82:8080"
        let template = $("#template")
        $.ajax({
            url: `${address}/getmessage`,
            success(data) {
                let studentlist = (JSON.parse(data))

                studentlist.forEach(item => {
                    let newitem = template.clone(true).attr("id", "")
                    newitem.find(".id").html(item.id)
                    newitem.find(".name").html(item.name)
                    newitem.find(".age").html(item.age)
                    newitem.find(".sex").html(item.sex ? "男" : "女")
                    newitem.find(".city").html(item.city)
                    newitem.find(".joinDate").html(item.joinDate)
                    $("tbody").append(newitem)
                })
            }
        })

        //删除学生信息
        template.find(".delete").click(function() {
            let nowitem = $(this).closest("tr")
            if (confirm(`真的要删除${nowitem.find(".name").html()}的信息吗？此项操作不可逆`)) {
                $.ajax({
                    url: `${address}/deletemessage`,
                    data: {
                        id: nowitem.find(".id").html()
                    },
                    success(data) {
                        nowitem.fadeOut()
                    }
                })
            }
        })

        //添加信息


        $("#addstudent").click(function() {
            $("#wrap").fadeIn()
            $("#pop").fadeIn()
            $("#name").focus()
            $("#submit").click(function() {
                if ($("#name").val() && $("#age").val() && $("#joinDate").val()) {
                    $.ajax({
                        url: `${address}/addmessage`,
                        data: {
                            name: $("#name").val(),
                            age: $("#age").val(),
                            sex: $("#female")[0].checked ? 1 : 0,
                            city: $("#province").val() + $("#city").val() + $("#area").val(),
                            joinDate: $("#joinDate").val(),
                        },
                        success(data) {
                            if (data === "error") {
                                alert("添加失败")
                            } else {
                                history.go(0)
                            }
                        }
                    })
                }
            })
        })


        // window.onkeydown = function(event) {
        //         if (event.keyCode === 13) {
        //             $("#submit").click()
        //         }
        //         if (event.keyCode === 27) {
        //             $("#cancel").click()
        //         }
        //     }
        //修改学生信息
        $(".edit").click(function() {
            let news = $(this).closest("tr")
            $("#wrap").fadeIn()
            $("#pop").fadeIn()
            $("#pop").find("#name").val(news.find(".name").html())
            $("#pop").find("#age").val(news.find(".age").html())
            $("#pop").find("#sex").val(news.find(".sex").html())
            $("#pop").find("#province").val(news.find(".city").html())
            $("#pop").find("#joinDate").val(news.find(".joinDate").html())
            $("#submit").click(() => {
                $.ajax({
                    url: `${address}/updatemessage`,
                    data: {
                        id: $(this).closest("tr").find(".id").html(),
                        name: $("#name").val(),
                        age: $("#age").val(),
                        sex: $("#female")[0].checked ? "女" : "男",
                        city: $("#province").val() + $("#city").val() + $("#area").val(),
                        joinDate: $("#joinDate").val()
                    },
                    success(data) {
                        if (data === "success") {
                            history.go(0)
                        } else {
                            console.log("error")
                        }
                    }
                })
            })

        })
        $("#cancel").click(function() {
            $("#wrap").fadeOut()
            $("#pop").fadeOut()
        })
    </script>
</body>

</html>